<template>
	<view class="custom-swiper">
		<view 
			class="swiper-container" 
			:style="{ height: containerHeight + 'rpx' }"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
			@touchend="onTouchEnd"
		>
			<!-- 左侧控制按钮 -->
			<view class="control-btn prev-btn" @click="prev">
        <text class="control-icon">＜</text>
      </view>
			
			<!-- 轮播项 -->
			<view 
				v-for="(item, index) in swiperList" 
				:key="index" 
				class="swiper-item"
				:class="{ 'active': currentIndex === index }"
				:style="getItemStyle(index)"
				@click="handleItemClick(index)"
			>
				<view class="swiper-img">
					<image class="swiper-img-item" :src="item.image"></image>
				</view>
			</view>
			
			<!-- 右侧控制按钮 -->
			<view class="control-btn next-btn" @click="next">
        <text class="control-icon">＞</text>
      </view>
		</view>
		<view class="swiper-dots" v-if="isShowDots">
			<view 
				v-for="(item, index) in swiperList" 
				:key="index" 
				class="dot"
				:class="{ 'active': currentIndex === index }"
				@click="handleDotClick(index)"
			></view>
		</view>
	</view>
</template> 

<script setup>
	import { ref, computed, onMounted, onUnmounted } from 'vue';
	
	// 定义props
	const props = defineProps({
		// 轮播图数据
		list: {
			type: Array,
			default: () => []
		},
		// 自动轮播间隔时间（毫秒）
		interval: {
			type: Number,
			default: 3000
		},
		// 是否自动轮播
		autoplay: {
			type: Boolean,
			default: true
		},
		// 容器高度
		height: {
			type: Number,
			default: 500
		},
    isShowDots: {
      type: Boolean,
      default: true
    }
	});
	
	// 定义事件
	const emit = defineEmits(['change', 'click']);
	
	// 容器高度
	const containerHeight = computed(() => props.height);
	
	// 轮播图数据
	const swiperList = computed(() => {
		if (props.list && props.list.length > 0) {
			return props.list;
		}
		// 默认数据
		return [
			{ image: 'https://placehold.jp/999999/ff4400/300x300.png?text=1' },
			{ image: 'https://placehold.jp/999999/ff4400/300x300.png?text=2' },
			{ image: 'https://placehold.jp/999999/ff4400/300x300.png?text=3' }
		];
	});
	
	// 当前激活的索引
	const currentIndex = ref(0);
	
	// 自动轮播定时器
	let timer = null;
	
	// 计算每个item的样式
	const getItemStyle = (index) => {
		const total = swiperList.value.length;
		const active = currentIndex.value;
		
		// 计算相对位置
		let position = index - active;
		// 确保位置在 -2 到 2 之间，以便只显示中间和两侧的项
		if (Math.abs(position) > 2) {
			if (position > 0) {
				position = position - total;
			} else {
				position = position + total;
			}
		}
		
		// 基础样式
		const style = {
			zIndex: 10 - Math.abs(position),
			opacity: 1,
			transform: 'scale(1)',
			left: '50%'
		};
		
		// 根据位置设置不同的样式
		if (position === 0) {
			// 当前激活项（中间）
			style.transform = 'translateX(-50%) scale(1)';
			style.zIndex = 10;
		} else if (position === -1) {
			// 左侧第一项
			style.transform = 'translateX(-150%) scale(0.5)';
			style.zIndex = 9;
		} else if (position === 1) {
			// 右侧第一项
			style.transform = 'translateX(50%) scale(0.5)';
			style.zIndex = 9;
		}  else {
			// 其他项隐藏
			style.opacity = 0;
			style.transform = 'translateX(-50%) scale(0.2)';
		}
		
		return style;
	};
	
	// 切换到指定索引
	const switchTo = (index) => {
		const total = swiperList.value.length;
		// 确保索引在有效范围内
		currentIndex.value = (index + total) % total;
		// 触发change事件
		emit('change', currentIndex.value);
	};
	
	// 切换到下一项
	const next = () => {
		switchTo(currentIndex.value + 1);
	};
	
	// 切换到上一项
	const prev = () => {
		switchTo(currentIndex.value - 1);
	};
	
	// 点击轮播项
	const handleItemClick = (index) => {
		if (index === currentIndex.value) {
			// 点击当前激活项
			emit('click', index);
		} else {
			// 点击非激活项，切换到该项
			switchTo(index);
		}
	};
	
	// 点击指示点
	const handleDotClick = (index) => {
		switchTo(index);
	};
	
	// 开始自动轮播
	const startAutoplay = () => {
		if (props.autoplay && swiperList.value.length > 1) {
			timer = setInterval(() => {
				next();
			}, props.interval);
		}
	};
	
	// 停止自动轮播
	const stopAutoplay = () => {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	};
	
	// 组件挂载时启动自动轮播
	onMounted(() => {
		startAutoplay();
	});
	
	// 组件卸载时清除定时器
	onUnmounted(() => {
		stopAutoplay();
	});
	
	// 拖拽相关变量
	const startX = ref(0);
	const moveX = ref(0);
	const isDragging = ref(false);
	
	// 触摸开始事件
	const onTouchStart = (e) => {
		startX.value = e.touches[0].clientX;
		isDragging.value = true;
		// 停止自动轮播
		stopAutoplay();
	};
	
	// 触摸移动事件
	const onTouchMove = (e) => {
		if (!isDragging.value) return;
		moveX.value = e.touches[0].clientX - startX.value;
	};
	
	// 触摸结束事件
	const onTouchEnd = () => {
		if (!isDragging.value) return;
		
		// 判断滑动方向和距离
		if (Math.abs(moveX.value) > 50) {
			if (moveX.value > 0) {
				// 向右滑动，切换到上一项
				prev();
			} else {
				// 向左滑动，切换到下一项
				next();
			}
		}
		
		// 重置拖拽状态
		isDragging.value = false;
		moveX.value = 0;
		
		// 如果需要，重新启动自动轮播
		if (props.autoplay) {
			startAutoplay();
		}
	};
	
	// 暴露方法给父组件
	defineExpose({
		next,
		prev,
		switchTo
	});
</script>

<style lang="scss">
	
	.custom-swiper {
		width: 750rpx;
		position: relative;
		
		.swiper-container {
			position: relative;
			width: 100%;
			height: 500rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: visible;
		}
		
		.control-btn {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 20;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.95);
				background-color: rgba(255, 255, 255, 0.8);
			}
			
			.control-icon {
				font-size: 40rpx;
				color: #333;
			}
		}
		
		.prev-btn {
			left: 30rpx;
		}
		
		.next-btn {
			right: 30rpx;
		}
		
		.swiper-item {
			position: absolute;
			width: 300rpx;
			transition: all 0.4s ease;
			cursor: pointer;
			
			&.active {
				width: 300rpx; // 中间项更大
				
				.swiper-img {
					width: 300rpx;
					height: 300rpx;
				}
			}
		}
		
		.swiper-img {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
			transition: all 0.4s ease;
		}
		
		.swiper-img-item {
			width: 100%;
			height: 100%;
		}
		
		.swiper-dots {
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			
			.dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #ddd;
				margin: 0 8rpx;
				transition: all 0.3s;
				
				&.active {
					width: 30rpx;
					border-radius: 15rpx;
					background-color: #ff4400;
				}
			}
		}
	}
</style>